<template>
  <div class="relative content bg-black flex-col flex-center">
    <div class="content-title relative flex-center">
      <img class="title-img" src="../../public/img/title.png" />
      <div class="title-text text-bold absolute">
        Jiaberr智慧城市数据可视化展示
      </div>
    </div>
    <div class="content-container relative flex-center flex1">
      <ThreeShow></ThreeShow>
      <div class="circle-mini h-p-20 w-p-40">
          <CustomCircleMiniCard :configData="circleMiniCardConfigData"></CustomCircleMiniCard>
        </div>
        <div class="top-number">
          <CustomTopNumber width="120px" color="#00D5E1" :value="2345632" title="数据展示"></CustomTopNumber>
        </div>
        <div class="top-number2">
          <CustomTopNumber width="120px" color="#F57623" :value="2345632" title="数据展示"></CustomTopNumber>
        </div>
      <CustomCard class="absolute left">
        <div class="w-p-100 h-p-60">
          <CustomTitle
            class="mt-20 mb-10"
            title="数据可视化展示分析"
          ></CustomTitle>
          <CustomTableCard
            :tableConfig="tableConfig"
            :tableData="tableData"
          ></CustomTableCard>
        </div>
        <div class="w-p-100 h-p-40">
          <CustomTitle
            class="mt-20 mb-10"
            title="数据可视化展示分析"
          ></CustomTitle>
          <CustomChartBarLine
            :configData="barLineChartConfigData"
          ></CustomChartBarLine>
        </div>
      </CustomCard>
      <CustomCard class="absolute right">
        <div class="right-top w-p-100 h-p-10 flex mt-20">
          <CustomNumberCard
            :number="135"
            title="数据展示"
            :scale="0.6"
          ></CustomNumberCard>
          <CustomNumberCard
            class="ml-10 mr-10"
            :number="32"
            title="数据展示"
            :scale="0.6"
            color="#D22228"
          ></CustomNumberCard>
          <CustomNumberCard
            :number="23"
            title="数据展示"
            :scale="0.6"
            color="#FFA900"
          ></CustomNumberCard>
        </div>
        <div class="h-p-40">
          <CustomTitle
            class="mt-20 mb-10"
            title="数据可视化展示分析"
          ></CustomTitle>
          <CustomChartLines
            :configData="lineChartConfigData"
          ></CustomChartLines>
        </div>
        <!-- <div class="h-p-20">
          <CustomProgressBar></CustomProgressBar>
        </div> -->
        
        

        <!-- <CustomCircleNumberCard></CustomCircleNumberCard> -->
        <!-- <div class="h-p-40 w-p-100">
          <CustomCirclePieChart></CustomCirclePieChart>
         </div> -->
        <div class="h-p-40 w-p-100">
          <CustomTitle
            class="mt-20 mb-10"
            title="数据可视化展示分析"
          ></CustomTitle>
          <CustomCirclePieOut
            :config-data="pieChartConfigData"
          ></CustomCirclePieOut>
        </div>
      </CustomCard>
    </div>
    <div class="bottom b-0 absolute-center w-p-50">
      <CustomTagBottom></CustomTagBottom>
    </div>
  </div>
</template>

<script setup>

import CustomCard from "@/components/CustomCard/index.vue";
import CustomTitle from "@/components/CustomTitle/index.vue";
import CustomTableCard from "@/components/CustomTableCard/index.vue";
import CustomChartBarLine from "@/components/CustomChartBarLine/index.vue";
import CustomNumberCard from "@/components/CustomNumberCard/index.vue";
import CustomChartLines from "@/components/CustomChartLines/index.vue";
import CustomProgressBar from "@/components/CustomProgressBar/index.vue";
import CustomCircleMiniCard from "@/components/CustomCircleMiniCard/index.vue";
import CustomCircleNumberCard from "@/components/CustomCircleNumberCard/index.vue";
import CustomTopNumber from "@/components/CustomTopNumber/index.vue";
import CustomCirclePieChart from "@/components/CustomCirclePieChart/index.vue";
import CustomCirclePieOut from "@/components/CustomCirclePieOut/index.vue";
import CustomTagBottom from "@/components/CustomTagBottom/index.vue";
import ThreeShow from "./components/threeShow.vue"
import {
  tableConfig,
  tableData,
  lineChartConfigData,
  barLineChartConfigData,
  circleMiniCardConfigData,
  pieChartConfigData,
} from "./mockData.js";




</script>

<style scoped>
@media (min-width: 1024px) {
  .content-title {
    height: 24.6%;
  }
  .content-container {
    width: 100%;
    height: 73.4%;
  }
}
.content {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.content-title {
  height: 8%;
  z-index: 999;
}
.content-container {
  box-sizing: border-box;
  width: 100%;
  height: 92%;
}
.title-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.title-text {
  bottom: 15px;
  font-size: 24px;
  color: #23c7f5;
}

.left {
  left: 20px;
}
.right {
  right: 20px;
}
.bottom {
  margin-bottom: -4.4%;
}
.circle-mini {
  position: absolute;
  width: 140px;
  left: 28%;
  bottom: 10%;
}
.top-number {
  position: absolute;
  right: 28%;
  top:20%;
}
.top-number2 {
  position: absolute;
  right: 28%;
  top:5%;
}
</style>